import React from "react";
import withCounter from "./withCounter";

// 定义一个普通组件，在组件内通过this.props使用增强后的功能
class ClickCounter extends React.Component {
  render() {
    console.log('+++++',this.props);
    return (
      <button onClick={this.props.handleCount}>
        按钮被点击了{this.props.count}次{this.props.name}
        {this.props.age}
      </button>
    );
  }
}

// 导出增强的组件
export default withCounter(ClickCounter);
// export default ClickCounter





// 其它示例
class HoverCounter extends React.Component {
  render() {
    return (
      <h1 onMouseOver={this.props.handleCount}>
        标题滑过了{this.props.count}次
      </h1>
    );
  }
}

class InputBlur extends React.Component {
  render() {
    console.log("===>", this.props.name);
    return (
      <div>
        失去焦点{this.props.count}次
        <input onBlur={this.props.handleCount}></input>
      </div>
    );
  }
}

// 或者使用函数组件
const InputBlur = (props) => {
  console.log("===>", props.name);
  return (
    <div>
      失去焦点{props.count}次
      <input onBlur={props.handleCount}></input>
    </div>
  );
}
